<template>
  <div>
    <min-bread :bread="bread"></min-bread>
    <min-table
      :minTable="minTable"
      :cols="cols"
      :minForm="minForm"
      :searchList="searchList"
      :pageInfo="pageInfo"
      @min-operator="handleOperator"
      @min-search="onSearch"
      @min-page="handleCurrentPage"
      @min-size="handlePageSize"
    ></min-table>
    <el-dialog title="申请频谱资源" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="申请原因">
          <el-input v-model="form.categoryName" style="width:200px;"></el-input>
        </el-form-item>
        <el-form-item label="选择频段">
          <el-select v-model="form.count" placeholder="请选择需要申请的范围">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">驳回</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">同意</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {},
      // 分页信息
      pageInfo: {
        show: true,
        currentPage: 0,
        total: 0,
        pageSize: 10
      },
      // 查询栏数组
      searchList: [
        {
          com: "cascader",
          prop: "id",
          label: "使用人",
          props: {
            value: "id",
            label: "categoryName",
            expandTrigger: "hover",
            checkStrictly: true,
            children: "child"
          },
          options: []
        }
      ],
      // 面包屑
      bread: {
        subTitle: "申请审批"
      },
      // 表格
      minTable: {
        loading: false,
        treeProps: { children: "children", hasChildren: "hasChildren" }, // 可懒加载
        tableData: [
          {
            categoryName: "179-316",
            count: "190-210",
            counter: "张三"
          },
          {
            categoryName: "179-316",
            count: "220-230",
            counter: "张四"
          }
        ]
      },
      // 传参
      params: {
        id: null,
        size: 10,
        page: 1,
        topicStatus: 1
      },
      // 表头数据
      cols: [
        {
          prop: "categoryName",
          label: "频谱频段"
        },
        {
          prop: "count",
          label: "使用频段"
        },
        {
          prop: "counter",
          label: "申请使用人"
        },
        {
          type: "btn",
          label: "操作",
          btnData: [
            {
              type: "text",
              size: "mini",
              iconName: "CP_search",
              operatTitle: "查看"
            }
          ]
        }
      ],
      // 查询栏表单
      minForm: {
        width: "68px",
        topicStatus: 1
      }
    };
  },
  created() {
    // 初始化数据
    // this.getInfo();
  },
  methods: {
    // 获取数据
    getInfo() {
      this.minTable.loading = true;
      // this.$http
      //   .post("/topic/count", this.params)
      //   .then(res => {
      //     let data = JSON.parse(JSON.stringify(res.data.data.topicManagerVos));
      //     data.map(el => {
      //       el.hasChildren = true;
      //     });
      //     this.minTable.tableData = JSON.parse(JSON.stringify(data));
      //     this.pageInfo.total = res.data.data.total;
      //     this.minTable.loading = false;
      //   })
      //   .catch(err => {
      //     this.minTable.loading = false;
      //   });
    },
    // 查询
    onSearch() {
      this.getInfo();
    },
    // 表格按钮操作
    handleOperator(index, row, operatTitle) {
      this.dialogFormVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
    },
    // 分页事件
    handleCurrentPage(val) {
      this.params.page = val;
      this.getInfo();
    },
    handlePageSize(val) {
      this.params.size = val;
      this.getInfo();
    },
    // 展开与收起
    onExpand(colItem, e) {
      colItem.ep = !colItem.ep;
      // this.getInfo();
    }
  }
};
</script>
<style scoped>
</style>
